<template>
  <div class="big_parent" style="overflow-x: hidden;">
    <div class="big_charts">
      
    </div>
    <div class="div_header" style="height: .9rem;" >
      <span>新型肺炎日报</span>
      <div class="header_btn_div">
        <span @click="comeToPage(0)">
          <img src="../../assets/images/icon/ribaojilu.png" >
        </span>
        <span @click="comeToPage(1)">
          <img src="../../assets/images/icon/dowload.png" >
        </span>
      </div>
    </div>
      <div class="contents_div">
        <div class="div_title"></div>
        <div class="filter_div">
          <div >
            <input type="text" ref="searchInput" placeholder="部门或名称">
            <span class="handle_span" @click="searchResult" > <img class="img_search" src="../../assets/images/icon/seach.png" alt="" srcset=""> </span>
          </div>
          <div @click="showTimePlugin">
            <span class="select_show">{{queryTime}}</span>
            <span class="handle_span"> <img class="img_select" src="../../assets/images/icon/select1.png" alt="" srcset=""> </span>
          </div>
          <div @click="showStatus">
            <span class="select_show" >{{statusStr}}</span>
            <span class="handle_span"> <img class="img_select" src="../../assets/images/icon/select1.png" alt="" srcset=""> </span>
            <span class="select_number">&nbsp;&nbsp;{{queryNum}}&nbsp;&nbsp;</span>
          </div>
        </div>
        <div class="list_div">
          <!-- 
          <li class="list_hide">
            <div class="two_div">部门：基础支撑部</div>
            <div class="two_div">姓名：陈宇 <span><img style="width:3vh;height:2vh;top:1.5vh;" src="../../assets/images/icon/dowtri.png"></span></div>
            <div class="two_div">本人状态：<font>正常</font></div>
            <div class="two_div">电话：18171415211 <span><img src="../../assets/images/icon/phone_1.png"></span></div>
          </li> -->
          <li :class="{list_show:item.whetherShow,list_hide:!item.whetherShow}" v-for="(item,index) in recordList" :key="index">
            <div class="two_div">处室：{{item.orgName}}</div>
            <div class="two_div">姓名：{{item.name}} <span @click="changeShowInfo(index,item.whetherShow)">
              <img v-if="item.whetherShow" style="width:3vh;height:2vh;top:2vh;" src="../../assets/images/icon/uptri.png">
              <img v-else style="width:3vh;height:2vh;top:2vh;" src="../../assets/images/icon/dowtri.png">
            </span></div>
            <div class="two_div">本人状态：
              <font v-if="item.myCondition=='1'" style="color:#ed393d">确诊</font>
              <font v-else-if="item.myCondition=='2'" style="color:#e9772b">疑似</font>
              <font v-else-if="item.myCondition=='3'" style="color:#e9d02b">密接</font>
              <font v-else-if="item.myCondition=='4'" style="color:#6ee57c">正常</font>
            </div>
            <div class="two_div">手机：{{item.phone}} <span><img src="../../assets/images/icon/phone_1.png"></span></div>
            <div class="big_info" v-if="item.whetherShow">
                <!-- <div class="one_div">
                  <span class="one_div_title">本人症状：</span>
                  <span class="one_div_content">{{item.symptom}}</span>
                </div> -->
                <div class="one_div">
                  <span class="one_div_title">常住地址：</span>
                  <span class="one_div_content">{{item.perAddress}}</span>
                </div>
                <div class="one_div">
                  <span class="one_div_title">现住地址：</span>
                  <span class="one_div_content">{{item.curAddress}}</span>
                </div>
                <div class="one_div_big">
                  <span class="one_div_title">居家隔离时间：</span>
                  <span class="one_div_content">{{item.isolationTime}}</span>
                </div>
                <div class="one_div_big">
                  <span class="one_div_title">家庭成员人数：</span>
                  <span class="one_div_content">{{item.familyNumber}}</span>
                </div>
                <div class="one_div_big">
                  <span class="one_div_title">家庭成员状况：</span>
                  <span class="one_div_content">{{changeStatusToName(item.familyStatus)}}</span>
                </div>
                <!-- <div class="one_div">
                  <span class="one_div_title">家属症状：</span>
                  <span class="one_div_content">{{item.familyStatusDescribe}}</span>
                </div> -->
                <div class="one_div">
                  <span class="one_div_title">其他：</span>
                  <span class="one_div_content">{{item.myConditionDescribe}}</span>
                </div>
            </div>
          </li>
           <div v-if="recordList.length==0" style="position: relative;top: 40px;left: 10%;width: 80%;height: 40%;text-align: center;">
              <div >暂无填报数据</div>
            </div>
          <!-- <li class="list_hide">
            <div class="two_div">部门：基础支撑部</div>
            <div class="two_div">姓名：陈宇 <span><img style="width:3vh;height:2vh;top:1.5vh;" src="../../assets/images/icon/dowtri.png"></span></div>
            <div class="two_div">本人状态：<font>正常</font></div>
            <div class="two_div">电话：18171415211 <span><img src="../../assets/images/icon/phone_1.png"></span></div>
          </li>
          <li class="list_hide">
            <div class="two_div">部门：基础支撑部</div>
            <div class="two_div">姓名：陈宇 <span><img style="width:3vh;height:2vh;top:1.5vh;" src="../../assets/images/icon/dowtri.png"></span></div>
            <div class="two_div">本人状态：<font>正常</font></div>
            <div class="two_div">电话：18171415211 <span><img src="../../assets/images/icon/phone_1.png"></span></div>
          </li> -->
        </div>
      </div>
      <datetime style="display:none" v-model="queryTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
      <popup-picker :show.sync="showPopupPicker"  :showCell="false" :columns="3" ref="pickerStatus" :show-name="true" @on-change="statusChange" :data="statusArr" v-model="statusModel"></popup-picker>
        
  </div>
</template>

<script>
//导入页面所需的标签
import {
  Tab,
  TabItem,
  Scroller,
  Cell,
  Group,
  Divider,
  XHeader,
  Search,
  Spinner,
  Drawer,
  XButton,
  Box,
  PopupPicker,
  Datetime,
  Flexbox,
  FlexboxItem
} from "vux";
import CaseCell from "./../mycomponents/CaseCell";
import TransitionPage from "./../mycomponents/TransitionPage";
import { getListofcases,queryListFordaily } from '@/assets/js/service'
export default {
  //组件
  components: {
    Tab,
    TabItem,
    Scroller,
    Cell,
    Group,
    Divider,
    XHeader,
    Search,
    CaseCell,
    TransitionPage,
    Spinner,
    Drawer,
    XButton,
    Datetime,
    Box,
    Flexbox,
    FlexboxItem,
    PopupPicker
  },
  //数据模型
  data() {
    return {
      // 页面tab栏标签,列举了4种预案 622000 事故灾难, 623000 公共卫生, 621000 自然灾害, 624000 社会安全
      taglist: [
        /*{itemKey: '总体预案', itemValue: '60A00',flagType: '0'},*/
      ],
      epplevel: [
        { key: "1", value: "国家级" },
        { key: "2", value: "省级" },
        { key: "3", value: "市级" },
        { key: "4", value: "县级" },
        { key: "5", value: "企业级" }
      ],
      queryTime:"",
      timeShow:false,
      queryNum:0,
      showPopupPicker:false,
      statusModel:[],
      statusArr: [{
        name: '全部',
        value: '0',
        parent: 0
      },{
        name: '确诊',
        value: '1',
        parent: 0
      }, {
        name: '疑似',
        value: '2',
        parent: 0
      }, {
        name: '密接',
        value: '3',
        parent: 0
      }, {
        name: '正常',
        value: '4',
        parent: 0
      } ],
      // 结果列表
      recordList: [],
      pageIndex: 1,
      currentItem: {},
      shownodata: false,
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      },
      pullup_config: {
        content: "",
        downContent: "",
        upContent: "",
        pullupStatus: "",
        loadingContent: "",
        hight: 60
      },
      pulldown_config: {
        content: "",
        downContent: "松开刷新",
        upContent: "松开刷新",
        loadingContent: "数据加载中...",
        pullupStatus: "",
        hight: 60
      },
      statues: {
        pullupstatues: "default"
      },
      drawerVisibility: false,
      showModeValue: "push",
      showPlacement: "right",
      showPlacementValue: "right",
      temptTopScroll: 0,
      swcount: 0,
      //提示图
      promptDiagram:this.promptDiagram,
      isAndroid: false,
      statusStr:"全部"
    };
  },
  //vue实例创建后调用
  created() {
    let _this = this;
    _this.reloadList("");
  },
  mounted() {
    window.goBack = this.goBack; //返回
    window.setUserIdandOrgCode = this.setUserIdandOrgCode; //ios赋值
  },
  //定义方法区
  methods: {
    changeStatusToName(val){
      //0:全部1:确诊/2:疑似/3:密接/4:正常
      let statusName="";
      if(parseInt(val)==0){
        statusName="全部";
      }else if(parseInt(val)==1){
        statusName="确诊";
      }else if(parseInt(val)==2){
        statusName="疑似";
      }else if(parseInt(val)==3){
        statusName="密接";
      }else if(parseInt(val)==4){
        statusName="正常";
      }
      return statusName;
    },
    changeTime(){
      console.log("change time")
      this.reloadList("");
    },
    comeToPage(_type){
      console.log("come to curr==>")
      if(_type==0){
        this.$router.push('/survey');
      }else{
        window.location.href="http://183.95.190.8:3645/app/down";
      }
    },
    changeShowInfo(_index,whetherShow){
      console.log(_index,whetherShow)
      let _this=this;
      let newRecordList=[];
      _this.recordList.forEach((item,index)=>{
        //debugger
        if(!whetherShow&&index==_index){
          item.whetherShow=true;
        }else{
          item.whetherShow=false;
        }
        newRecordList.push(item)
        // this.$set(item,index,_this.recordList)
      })
      _this.recordList=newRecordList;
    },
    showTimePlugin(){
      this.timeShow=true;
       
    },
    showStatus(){
      this.showPopupPicker=true;
    },
    reloadList(keyword){
      console.log("init reload keyword==>"+ keyword);
      let _this=this;
      let status="0";
      if(_this.statusModel.length>0){
        status=_this.statusModel[0];
      }
      let param={"keyword":keyword,"createTime":_this.queryTime,"status":status}
      queryListFordaily(param,function(res){
        if(res&&res.data.dataList.length>0){
          _this.recordList=[];
          _this.queryNum=res.data.total;
          _this.recordList=res.data.dataList;
          if(_this.recordList.length>0){
            _this.recordList.forEach((item,index)=>{
              console.log(item)
              item.whetherShow=false;
            })
            console.log(_this.recordList)
          }
        }else{
          _this.recordList=[];
        }
      })
      return;
      _this.recordList=data.data.dataList;
      
    },
    statusChange(val){
      console.log("status change",val)
      console.log(this.statusModel)
      this.statusStr=this.$refs.pickerStatus.getNameValues();
      this.reloadList("");
      
    },
    queryRequest(page_flag) {
      let page_flags="";
      let _this = this;
      if(page_flag==undefined){
         page_flags=""
         _this.recordList=[];
      }else{
        page_flags=page_flag;
      }
      if (1 == this.pageIndex) {
        this.promptDiagram.show = true; //开启效果图
      }
      
      var param = {
          address: "",
          caseName: "",
          keyWord: page_flags,
          listOrder: { prop: "", sort: "" },
          nowPage: _this.pageIndex,
          pageSize: 10,
          startTime: "",
          typeCode: ""
        };
        getListofcases(param,function(data){
          if (typeof(data.data)!='undefined'&&typeof(data.data.list)!='undefined'&&data.data.list.length > 0) {
              Array.from(data.data.list, x => {
                _this.recordList.push(x);
              });
            } else {
              _this.$showBottomToast("无更多数据");
            }
            _this.promptDiagram.show=false;
        })
    },
    //输入关键字查询
    searchResult() {
      var keyWord = this.$refs.searchInput.value;
      this.recordList=[];
      this.reloadList(keyWord)//请求接口
      
    },
    loadMore(selectItem) {
      var _this = this;
      setTimeout(() => {
        /*_this.showBottomToast("上拉加載！")*/
        _this.pageIndex++;
        _this.loadPage(_this.pageIndex, selectItem, false);
        setTimeout(() => {
          this.$refs.scroller.donePullup();
        }, 10);
      }, 2000);
    },
    /**
     * 加载数据
     * @param pageIndex 页数
     * @param eppType 类型
     * @param reload 是否重新加载
     */
    loadPage(pageIndex, selectItem, reload) {
      console.log(selectItem);
      console.log(pageIndex + "===" + selectItem + "===>" + reload);
      this.currentItem = selectItem;
      let _this = this;
      
      // 如果是第一页，则重置页面列表
      if (1 == pageIndex) {
        //恢复跳转到页面顶端
        // this.$refs.scroller.reset({top:0})
        _this.pageIndex = 1;
        _this.recordList = [];
        _this.shownodata = true;
        //添加加载效果图
        this.promptDiagram.show = true; //开启效果图
      }

      setTimeout(() => {
       	_this.queryRequest("");
        // return;
        // var param={"address":"","caseName":"","keyWord":"","listOrder":{"prop":"","sort":""},"nowPage": 1,"pageSize":10 ,"startTime":"","typeCode":""}
        
        _this.$refs.scroll1.donePullup();
        _this.$refs.scroll1.donePulldown();
        _this.$nextTick(() => {
          this.$refs.scroll1.reset();
        });
      }, 1000);
    },
    goBack() {
      var backUrl = this.title.backUrl;
      console.log("title==>" + backUrl);
      if (
        backUrl != undefined &&
        backUrl != null &&
        backUrl != "null" &&
        backUrl != ""
      ) {
        if (backUrl == "/index") {
          window.android.destory();
        } else {
          this.$router.push(backUrl);
        }
      } else {
        this.$router.go(-1); //返回上一次历史记录
      }
    },
    openside() {
      console.log("赋值");
      let this_obj = document.getElementsByClassName("contents_div")[0];
      console.log(this_obj);
      console.log(this.drawerVisibility);
      if (!this.drawerVisibility) {
        this.drawerVisibility = !this.drawerVisibility;
      } else {
        this.drawerVisibility = !this.drawerVisibility;
      }
    },
  }
};
</script>
<style lang="less" scoped>
.big_parent{
  width: 100%;
  height: 100%;
  background: url("../../assets/images/icon/bj01.png");
  background-size: 100% 180%;
  .div_header{
    width: 100%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    color: #ffffff;
    font-size: 17px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: 0px 1px 0px 0px 
      rgba(160, 113, 113, 0.34);
    .header_btn_div{
      width: 20%;
      height: .9rem;
      position: fixed;
      right: 0;
      top: 0px;
      span{
        width: 45%;
        height: 90%;
        display: block;
        float: left;
        img{
          width: 62%;
          margin-top: 25%;
          margin-left: 25%;
        }
      }
    }
  }
  .contents_div{
    width: 100%;
    height: calc( 100% - 1rem );
    .div_title{
      width: 100%;
      height: 10%;
      background: url("../../assets/images/icon/resultquery.png");
      background-size: 100% 100%;
      
    }
    .filter_div{
      width: 92%;
      height: 6%;
      margin-left: 4%;
      div{
        width: 30%;
        height: 100%;
        font-size: 13px;
        float: left;
        color: #55d5ff;
        margin-left: 3%;
        position: relative;
        background-color: rgba(0,0,0,.2);
        border-radius: 4px;
        border: 1px solid rgba(85,213,255,.48);
        input{
          width: 80%;
          height: 100%;
          color: #55d5ff;
          padding: 3px;
          background: rgba(0, 0, 0, 0.1);
        }
        .select_show{
          width: 80%;
          height: 100%;
          line-height: 5vh;
          padding-left: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          
        }
        .select_number{
          display: block;
          position: absolute;
          background: red;
          right: -3vw;
          top: -14px;
          height: 20px;
          border-radius: 30px;
        }
        .handle_span{
          width: 20%;
          height: 100%;
          position: absolute;
          right: 0px;
          .img_search{
            width: 80%;
            margin-top: 50%;
          }
          .img_select{
            width: 75%;
            margin-top: 65%;  
          }
        }
      }
    }
    .list_div{
      width: 92%;
      height: calc( 100% - 6% - 10% );
      overflow-y: auto;
      margin-left: 4%;
      color: #d1f4fe;
      .list_hide{
        width: 100%;
        overflow: hidden;
        margin-top: 2vh;
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 0px 0px 
          rgba(85, 213, 255, 0.32);
        border-radius: 3px;
        border: solid 1px rgba(85, 213, 255, 0.39);
      }
      .list_show{
        width: 100%;
        margin-top: 2vh;
        overflow: hidden;
        background-color: rgba(36, 105, 233, 0.65);
        box-shadow: 0px 1px 0px 0px 
          rgba(85, 213, 255, 0.32);
        border-radius: 3px;
        border: solid 1px rgba(85, 213, 255, 0.39);
      }
      li{
        .two_div{
          width: 50%;
          height: 6vh;
          padding-left: 2%;
          line-height: 6vh;
          position: relative;
          float: left;
          img{
            position: absolute;
            right: 5px;
            top: 1vh;
            height: 3vh;
          }
        }
        .big_info{
          width: 100%;
          float: left;
          padding-top: 3%;
          border-top: 1px solid rgba(85,213,255,0.4);
          .one_div{
            width: 100%;
            line-height: 4vh;
            .one_div_title{
              width: 24%;
              padding-left: 2%;
              display: inline-block;
              float: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .one_div_content{
              width: 76%;
              display: inline-block;
            }

          }
          .one_div_big{
            width: 100%;
            line-height: 4vh;
            .one_div_title{
              width: 32%;
              padding-left: 2%;
              display: inline-block;
              float: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .one_div_content{
              width: 68%;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
